<!DOCTYPE html> 
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
    <!--[if IE]><script src="/media/flot-0.7/js/excanvas.min.js"></script><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery-1.5.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.min.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.pie.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.stack.js"></script>
    <link type="text/css" href="/media/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />  
    <script type="text/javascript" src="/media/jquery-ui/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.transform-0.9.3.min.js"></script>

    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.mousewheel.js"></script>
    <script language="javascript" type="text/javascript" src="/media/jScrollPane-2.0.0b10/script/jquery.jscrollpane.js"></script>
    <link type="text/css" href="/media/jScrollPane-2.0.0b10/style/jquery.jscrollpane.css" rel="Stylesheet" />  
    <link type="text/css" href="/media/jScrollPane-2.0.0b10/themes/lozenge/style/jquery.jscrollpane.lozenge.css" rel="Stylesheet" />      
    <script language="javascript" type="text/javascript" src="js/debug.js"></script>
    <script language="javascript" type="text/javascript" src="js/time.js"></script>
    <script language="javascript" type="text/javascript" src="js/datasource.js"></script>
    <script language="javascript" type="text/javascript" src="js/graph.js"></script>
    <script language="javascript" type="text/javascript" src="js/range.js"></script>

    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.timers-1.2.js"></script>

    <title>Graph</title>

    <script type="text/javascript">
    var name_map;
    var units_map;
    $(document).ready(function() {
      name_map = {
        'SDH.SW.MSA.MAIN.REAL 3 PH' : 'MSA',
        'SDH.SW.MSB.MAIN.REAL 3 PH' : 'MSB',

        'SDH.DEM.CR22A.DEMAND' : 'Floor 2 Plug',
        'SDH.DEM.CR23A.DEMAND' : 'Floor 3 Plug',
        'SDH.DEM.CR24A.DEMAND' : 'Floor 4 Plug',
        'SDH.DEM.CR25A.DEMAND' : 'Floor 5 Plug',
        'SDH.DEM.CR26A.DEMAND' : 'Floor 6 Plug',
        'SDH.DEM.CR27A.DEMAND' : 'Floor 7 Plug',

        'SDH.DEM.CL42A.DEMAND' : 'Floor 2 Lights',
        'SDH.DEM.CL43A.DEMAND' : 'Floor 3 Lights',
        'SDH.DEM.CL44A.DEMAND' : 'Floor 4 Lights',
        'SDH.DEM.CL45A.DEMAND' : 'Floor 5 Lights',
        'SDH.DEM.CL46A.DEMAND' : 'Floor 6 Lights',
        'SDH.DEM.CL47A.DEMAND' : 'Floor 7 Lights',

        'data/RTM/sensor/total_price' : 'Real-Time Market Price (5 min)',
        'data/DAM/sensor/total_price' : 'Day-Ahead Market Price (1 hr)',
      };

      units_map = {
        '(watts)' : 'Power (W)',
        '(kilowatts)' : 'Power (kW)',
        '($)' : 'Price ($/MWh)'
      };

      $("#check").button();
      $("#check").attr('checked', false);

      var total = [ new Stream(7130), new Stream(7099) ];
      var plug = [ new Stream(7107), new Stream(7117), new Stream(7100), new Stream(7108), new Stream(7128), new Stream(7087) ];
      var lighting = [ new Stream(7083), new Stream(7096), new Stream(7094), new Stream(7101), new Stream(7118), new Stream(7116) ];

      var a = new Graph($("#ts"), total, 'stackts');
      var live = new Live(a, 5*60);

      $("#check").click(function() {
        if ($("#check").is(':checked')) {
          live.start();
        } else {
          live.stop();
        } 
      });

      //var b = new Graph($("#pie"), total, 'pie');
      //var e = new Graph($("#plug_ts"), [ new Stream(7094), new Stream(7100)], 'ts');

      var l = new Graph($("#lighting"), lighting, 'bar');
      var p = new Graph($("#plug"), plug, 'pie');
      var range = new Range($("#range"), [lighting[0]], [l, p], 7*24*60*60*1000);

      //$("#range").css("width", a.plot.width()+8); range.refresh();

      var price = [ new Stream(3844), new Stream(3848) ];
      var iso = new Graph($("#caiso"), price, 'ts', {min: -50, max: 100});
      iso.drawLast(5*24*60*60*1000);

      //var iso = new Graph($("#caiso"), price, 'ts');
    });
    </script>

    <style type="text/css">
      a:link { color: #000;text-decoration: none; }
      a:visited { color: #000;text-decoration: none;  }
      a:active { color: #000;text-decoration: none;  }
      a:hover { color: #000; text-decoration: underline; }

      div.graph {
        position: relative;
        float: left;
        width: 400px;
        height: 300px;
      }
      div.range {
        position: relative;
        float: left;
        clear: both;
        width: 800px;
        height: 100px;
      }
      div.widget {
        position: relative;
        float: left;
        margin-left: 10px;
        margin-top: 10px;
      }
      div.title {
        text-align: center;
        font-weight: normal;
        font-size: large;
      }
      div.ylabel {
        text-align: center;
        font-weight: normal;
        font-size: medium;
      }
      div.hover {
        position: absolute;
        z-index: 1000;
      }
      div.row {
        clear: both;
      }
    </style>
</head>
<body>
<div id="hover" class="hover"></div>

<div style="text-align: left; font-size: x-large">
Sutardja Dai Hall Energy Dashboard<br/>
<br/>
<img src="http://i4energy.org/sites/i4energy.org/files/images/CITRIS%20Exterior%20Front%20Facadex.jpg"/>
<br/><br/>
</div>

<div style="float: left;">

<div class="row">
  <div class="widget">
    <div class="title">Building Power</div>
    <div id="ts" class="graph" style="width: 800px;"></div>
  </div>
  <input type="checkbox" id="check" /><label for="check">Update</label>
<!--
  <div class="widget">
    <div class="title">Average Building Power by Submeter</div>
    <div id="pie" class="graph"></div>
  </div>
-->
</div>

<!--
<div class="row">
  <div class="widget">
    <div class="title">4th Floor Plug Power</div>
    <div id="plug_ts" class="graph" style="clear: both; margin-top: 20px;"></div>
  </div>
</div>
-->

<div class="row">
  <div class="widget">
    <div class="title">Lighting Power by Floor</div>
    <div id="lighting" class="graph" style="clear: both; margin-top: 20px;"></div>
  </div>
  <div class="widget">
    <div class="title">Plug Loads by Floor</div>
    <div id="plug" class="graph" style="margin-top: 20px;"></div>
  </div>
</div>
<div id="range" class="range"></div>

<div class="row">
  <div class="widget">
    <div class="title">CAISO Prices</div>
    <div id="caiso" class="graph" style="width: 800px; margin-top: 20px;"></div>
  </div>
</div>

<div class="row" style="padding-top: 30px">
<a href="http://local.cs.berkeley.edu" style="float:left;"><img src="img/local-logo.png" alt="LoCal"></a>
<span style="font-size: medium">Dashboard by <a href="http://cs.berkeley.edu/~krioukov/">Andrew Krioukov.</a></span>
</div>

</div>
</body>
</html>
